<template>
  <el-form label-position="left" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" style="text-align: left">
    <el-form-item label="影院" prop="cinemaId">
      <el-select v-model="cinemaId" @change="findLobbyListByCinemaId()" filterable placeholder="请选择">
        <el-option
            v-for="item in cinemaList"
            :key="item.id"
            :label="item.cinemaName"
            :value="item.id">
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="影厅" prop="lobbyId">
      <el-select v-model="ruleForm.lobbyId" filterable placeholder="请选择">
        <el-option
            v-for="item in lobbyList"
            :key="item.id"
            :label="item.lobbyName"
            :value="item.id">
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="电影" prop="movieId">
      <el-select v-model="ruleForm.movieId" filterable placeholder="请选择">
        <el-option
            v-for="item in movieList"
            :key="item.id"
            :label="item.movieName"
            :value="item.id">
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="播放时间" required>
      <el-col :span="11">
        <el-form-item prop="startTime">
          <el-date-picker type="datetime" value-format="timestamp" placeholder="选择日期" @change="addEndTime()" v-model="ruleForm.startTime" style="width: 300px;"></el-date-picker>
        </el-form-item>
      </el-col>
    </el-form-item>
    <el-form-item label="散场时间" required>
      <el-col :span="11">
        <el-form-item prop="endTime">
          <el-date-picker type="datetime" value-format="timestamp" placeholder="选择日期" v-model="ruleForm.endTime" style="width: 300px;" disabled></el-date-picker>
        </el-form-item>
      </el-col>
    </el-form-item>
    <el-form-item label="金额（￥）" prop="money">
      <el-input v-model="ruleForm.money" style="width: 300px"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
      <el-button @click="resetForm('ruleForm')">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  name: "ScreeningAddView",
  data() {
    return {
      cinemaList: this.$route.query.cinemaList,
      cinemaId: '',
      lobbyList: [],
      movieList: [],
      ruleForm: {
        id: this.$route.query.id,
        lobbyId: '',
        movieId: '',
        startTime: '',
        endTime: '',
        money: ''
      },
      rules: {
        lobbyId: [
          { required: true, message: '请选择影厅', trigger: 'change' }
        ],
        movieId: [
          { required: true, message: '请选择电影', trigger: 'change' }
        ],
        startTime: [
          { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
        ],
        money: [
          { required: true, message: '请填写金额', trigger: 'blur' }
        ]
      }
    };
  },
  created() {
    this.handleList();
    this.handleGetScreening()
  },
  methods: {
    handleGetScreening() {
      if (this.ruleForm.id != null) {
        this.axios.get("manage/screening/getScreeningInfo", {params: {id: this.ruleForm.id}}).then(response => {
          if (response.data.code == 200) {
            this.ruleForm.startTime = Date.parse(response.data.data.startTime);
            this.ruleForm.endTime = Date.parse(response.data.data.endTime);
            this.ruleForm.movieId = response.data.data.movieId;
            this.ruleForm.money = response.data.data.money;
            this.ruleForm.lobbyId = response.data.data.lobbyId;
            this.cinemaId = response.data.cinemaId;
          }
        })
      }
    },
    handleList(){
      this.axios.get("manage/screening/findMovieListAndCinemaList").then(response => {
        if (response.data.code == 200) {
          this.cinemaList = response.data.data;
          this.movieList = response.data.movieList;
        }
      })
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.axios.post("manage/screening/add",this.ruleForm).then(response=>{
            this.$router.push("/screening/list")
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    findLobbyListByCinemaId(){
      this.ruleForm.lobbyId='';
      this.axios.get("manage/screening/findLobbyListByCinemaId",{params:{id:this.cinemaId}}).then(response=>{
        if (response.data.code==200){
          this.lobbyList = response.data.data;
        }
      })
    },
    addEndTime() {
      if (this.ruleForm.movieId != '') {
        var movieTime = '';
        this.axios.get("manage/movie/getMovieTime", {params: {id: this.ruleForm.movieId}}).then(response => {
          movieTime = response.data.data;
          this.ruleForm.endTime = this.ruleForm.startTime + (movieTime * 1000 * 60);
        })
      }
    }
  }
}
</script>

<style scoped>

</style>